<template>
    <div id="banners">
        <el-space direction="vertical" :size="20" style="width: 100%">
            <h1>轮播图管理</h1>
            <div style="text-align: right">
                <el-button type="primary" @click="AddBanners">
                    <el-icon>
                        <plus />
                    </el-icon>
                    添加轮播图
                </el-button>
            </div>
            <el-table :data="banners" style="width: 100%">
                <el-table-column prop="name" label="图片名称" />
                <el-table-column label="图片链接">
                    <template #default="scope">
                        <img :src="ImageUrlFormat(scope.row.img_url)" style="width: 200px;height: 60px;" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="url_to" label="跳转链接">
                    <template #default="scope">
                        <a :href="scope.row.url_to" target="_blank">{{ scope.row.url_to }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="priority" label="优先级别" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="EditEvent(scope.$index)">
                            <el-icon>
                                <edit />
                            </el-icon>
                        </el-button>
                        <el-button type="danger" @click="DelEvent(scope.$index)">
                            <el-icon>
                                <delete />
                            </el-icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-space>

        <el-dialog v-model="BannerdialogFormVisible" title="添加/修改轮播图" width="30%">
            <el-form :model="form" :rules="rules" ref="BannerDialogFrom">
                <el-form-item label="图片名称" prop="name">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="图片链接" prop="img_url">
                    <div style="display: flex;">
                        <el-input v-model="form.img_url" autocomplete="off" style="margin-right: 10px;" />
                        <el-upload :action="$http.server_host + '/cmsapi/banner/images/upload/'" name="image"
                            :headers="{ 'Authorization': 'Bearer ' + $auth.token }" :show-file-list="false"
                            accept="image/jpg,image/png,image/jpeg" :on-success="ImgUploadSuccess"
                            :on-error="ImgUploadError">
                            <el-button type="primary">上传图片</el-button>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="跳转链接" prop="url_to">
                    <el-input v-model="form.url_to" autocomplete="off" />
                </el-form-item>
                <el-form-item label="优先级别" prop="priority">
                    <el-input v-model="form.priority" autocomplete="off" type="number" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="BannerdialogFormVisible = false">取消</el-button>
                    <el-button @click="onDialogBtnSubmit" type="primary">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 删除轮播图对话框 -->
        <el-dialog v-model="confirmDelDialogVisible" title="删除操作提示" width="30%">
            <span>确定删除当前轮播图吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="confirmDelDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="btnDeleBanner">确定</el-button>
                </span>
            </template>

        </el-dialog>

    </div>
</template>

<script>
import { Plus, Edit, Delete } from "@element-plus/icons";
import { ElMessage } from "element-plus";
export default {
    name: "BannerPage",
    components: {
        Plus, Edit, Delete
    },
    data() {
        return {
            BannerdialogFormVisible: false,
            confirmDelDialogVisible: false,
            del_index: 0,
            edit_index: 0,
            banners: [],
            form: {
                name: "",
                img_url: "",
                url_to: "",
                priority: 0
            },
            rules: {
                name: [{ required: true, message: "请输入轮播图图片名称！", trigger: 'blur' }],
                img_url: [{ required: true, message: "请上传轮播图！", trigger: 'blur' }],
                url_to: [{ required: true, message: "请输入当前轮播图跳转链接！", trigger: 'blur' }],
                priority: [{ required: true, message: "请输入轮播图图片优先级！", trigger: 'blur' }],
            },
        }
    },
    methods: {
        //图片列表中图片链接格式化
        ImageUrlFormat(img_url) {
            if (img_url.startsWith("http")) {
                return img_url
            } else {
                return this.$http.server_host + img_url
            }
        },
        //初始化添加轮播图对话框
        InitForm(banner) {
            //如果传入banner有值，则将banner值绑定到form中
            if (banner) {
                this.form.id = banner.id
                this.form.name = banner.name
                this.form.img_url = banner.img_url
                this.form.url_to = banner.url_to
                this.form.priority = banner.priority
            } else {
                this.form = {
                    id: null,
                    name: "",
                    img_url: "",
                    url_to: "",
                    priority: 0
                }
            }
        },
        //添加轮播图
        AddBanners() {
            this.InitForm();
            this.BannerdialogFormVisible = true;
        },
        //图片上传成功回调函数
        ImgUploadSuccess(response) {
            if (response['code'] == 200) {
                var img_name = response['data']['image'];
                var img_url = '/media/banner/' + img_name
                this.form.img_url = img_url
            }
        },
        // 图片上传失败回调函数
        ImgUploadError(error, uploadFile, uploadFiles) {
            console.log(error)
            console.log(uploadFile)
            console.log(uploadFiles)
        },
        //轮播图提交事件
        onDialogBtnSubmit() {
            this.$refs["BannerDialogFrom"].validate((valid) => {
                if (!valid) {
                    ElMessage.error("请按照系统指定格式传入表单数据！");
                    return;
                }
                //根据form是否有id来区分是编辑操作还是添加操作
                if (this.form.id) {
                    //此处执行编辑操作
                    this.$http.editbanner(this.form).then(res => {
                        let code = res['code'];
                        if (code == 200) {
                            let banner = res['data'];
                            this.banners.splice(this.edit_index, 1, banner);
                            ElMessage.success("轮播图编辑成功！");
                            this.BannerdialogFormVisible = false;
                        }
                    })
                } else {
                    //此处执行添加操作
                    this.$http.addbanner(this.form).then((resp) => {
                        let code = resp['code'];
                        if (code == 200) {
                            let banner = resp['data'];
                            this.banners.push(banner);
                            ElMessage.success("轮播图添加成功！");
                            this.BannerdialogFormVisible = false;
                        }
                    }).catch(() => {
                        ElMessage.error("服务器开小差了，请稍后再试！");
                        this.BannerdialogFormVisible = false;
                    })
                }

            });
        },
        //删除轮播图操作
        DelEvent(index) {
            this.del_index = index;
            this.confirmDelDialogVisible = true;
        },
        //编辑轮播图
        EditEvent(index) {
            this.edit_index = index;
            let banner = this.banners[index];
            this.InitForm(banner);
            this.BannerdialogFormVisible = true;
        },
        //确定删除轮播图执行事件
        btnDeleBanner() {
            let banner = this.banners[this.del_index];
            this.$http.delbanner(banner.id).then(res => {
                let code = res['code'];
                if (code == 200) {
                    this.banners.splice(this.del_index, 1);
                    ElMessage.success("轮播图删除成功！");
                    this.confirmDelDialogVisible = false;
                }
            })
        },
    },
    mounted() {
        this.$http.getbannerlist().then(res => {
            if (res['code'] == 200) {
                let banners = res['data']
                this.banners = banners
            }else{
                ElMessage.error(res['message'])
            }

        })
    }
};

</script>


<style scoped>
.el-space {
    display: block;
}
</style>
